বুটস্ট্রাপ টিউটোরিয়াল: আমাদের এই বুটস্ট্রাপ টিউটোরিয়ালটিতে খুব সহজভাবে বুটস্ট্রাপ এর সমস্ত কম্পোনেন্ট আলোচনা করা হয়েছে। যেন আপনিও খুব সহজেই বুঝতে পারেন।
রেসপন্সিভ এবং মোবাইল-ফার্স্ট ওয়েবসাইট ডেভেলপ করার ক্ষেত্রে টুইটার বুটস্ট্রাপ হলো এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক।
এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy
করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy
করা কোড paste
করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।\
kt_satt_skill_example_id=759
রেসপন্সিভ ওয়েব ডিজাইন কি?
রেসপন্সিভ ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই এডজাস্ট করে নিতে পারে।
বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলোপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি পায়।
২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্টে হিসেবে বিবেচিত হয়!
বুটস্ট্রাপ এর সুবিধাঃ
আপনার ওয়েব সাইটে বুটস্ট্রাপ ব্যবহার করার জন্য দুইটি পদ্ধতি আছে।
যেভাবে পাবেনঃ
getbootstrap.com
থেকে ডাউনলোড করে
যদি আপনি নিজের বুটস্ট্রাপ ডাউনলোড এবং হোস্ট করতে চান তাহলে getbootstrap.com, এ যান এবং পদ্ধতিগুলো অনুসরন করুন।
যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (CDN = Content Delivery Network)।
MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে। এগুলোর পাশাপাশি এছাড়াও আপনাকে অবশ্যই জেকুয়েরি লাইব্রেরি যুক্ত করতে হবেঃ
kt_satt_skill_example_id=761
১। এইচটিএমএল(৫) DOCTYPE যুক্ত করুন।
বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপার্টি ব্যবহৃত হয়, যার জন্য এইচটিএমএল(৫) DOCTYPE নির্ধারন করা বাধ্যতামূলক।
সবসময়ই পেজের শুরুতেই এইচটিএমএল(৫) DOCTYPE যুক্ত করুনঃ
kt_satt_skill_example_id=763
২। বুটস্ট্রাপ(৩) মোবাইল-ফার্স্ট
বুটস্ট্রাপ(৩) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ।
যথাযথ আউটপুট এবং টাচ জুমিং এর জন্য এলিমেন্টের মধ্যে
ট্যাগ নিশ্চিত করুনঃ
kt_satt_skill_example_id=764
ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width
ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)।
পেইজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1
ব্যবহার করা হয়েছে।
৩। কন্টেইনার
বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়।
বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। আপনার প্রয়োজন অনুযায়ী কন্টেইনার বাচাই করে নিনঃ
.container
ক্লাস ব্যবহার করুন।.container-fluid
ক্লাস ব্যবহার করুন।নোটঃ কন্টেইনারগুলো নেস্টেবল নয় (আপনি চাইলেই কন্টেইনারের মধ্যে কন্টেইনার রাখতে পারবেন না)।
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (ফিক্সড প্রস্থের কন্টেইনার সহ)
kt_satt_skill_example_id=765
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (পূর্ণ প্রস্থের কন্টেইনার সহ)
kt_satt_skill_example_id=766
স্যাট একাডেমীতে বুটস্ট্রাপ সিএসএস ক্লাস, কম্পোনেন্ট এবং জাভাস্ক্রিপ্ট প্লাগ-ইনের সম্পূর্ণ রেফারেন্স রয়েছে। এছাড়াও প্রত্যেক অধ্যায়কেই "নিজে চেষ্টা করি " উদাহরণ দিয়ে সাজানো হয়েছে:
আরও দেখুন...